<template>
	<view class="userinfo-form">
		<view class="userinfo-item">
			<label>用户名:</label><input :disabled="!isUpdate" v-model="userInfo.username" placeholder="用户名" />
		</view>
		<view class="userinfo-item">
			<label>昵 称:</label><input :disabled="!isUpdate" v-model="userInfo.nickname" placeholder="昵称" />
		</view>
		<view class="userinfo-item">
			<label>手机号:</label><input :disabled="!isUpdate" v-model="userInfo.mobile" placeholder="手机号" />
		</view>
		<view class="userinfo-item">
			<label>邮 箱:</label><input :disabled="!isUpdate" v-model="userInfo.email" placeholder="邮箱" />
		</view>
		<view class="userinfo-item">
			<label>房 号:</label>
			<view class="roomnum-picker-waper">
				<picker @change="buildNumChange" :disabled="!isUpdate" :range="buildNums">
					<view>{{userInfo.buildNum?userInfo.buildNum:''}}</view>
				</picker>
				—
				<picker @change="partNumChange" :disabled="!isUpdate" :range="[1,2,3,4,5]">
					<view>{{userInfo.partNum?userInfo.partNum:''}}</view>
				</picker>
				—
				<picker @change="roomNumChange" :disabled="!isUpdate" :range="roomNums">
					<view>{{userInfo.roomNum?userInfo.roomNum:''}}</view>
				</picker>
			</view>
		</view>
		<button style="	background-color: #ff4548;" v-if="!isUpdate" @click="isUpdate=true">修改</button>
		<button style="	background-color: #71abe8;" v-if="isUpdate" @click="updateUser">提交</button>
	</view>
</template>

<script>
	import {getUserInfo,updateUserInfo} from '../../common/api/oauthServer/user.js'
	export default {
		data() {
			return {
				index: 0,
				isUpdate: false,
				buildNums: [],
				roomNums: [],
				userInfo: {
					username: '',
					mobile: '',
					nickname: '',
					buildNum: '',
					partNum: '',
					roomNum: '',
				}
			}
		},
		onLoad() {
			for (var i = 1; i < 45; i++) {
				this.buildNums.push(i)
			}
			for (var i = 1; i < 12; i++) {
				this.roomNums.push(i+'0'+1)
				this.roomNums.push(i+'0'+2)
			}
			// 获取用户信息
			getUserInfo().then(res=>{
				this.userInfo=res
			})
		},
		methods: {
			buildNumChange(val) {
				this.userInfo.buildNum=this.buildNums[val.target.value]
			},
			roomNumChange(val) {
				this.userInfo.roomNum=this.roomNums[val.target.value]
			},
			partNumChange(val) {
				this.userInfo.partNum=parseInt(val.target.value)+1
			},
			updateUser() {
				updateUserInfo(this.userInfo).then(res=>{
					getUserInfo().then(res=>{
					    let newUserInfo = res
					    this.$store.commit('SET_USERINFO',newUserInfo)
						this.isUpdate=false
						uni.showToast({
							icon:'success',
							title:'信息更新成功'
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo-form {
		display: flex;
		flex-direction: column;
	}

	.userinfo-item {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		border-bottom: 1px solid #d2d2d2;
		;
	}

	.userinfo-item label {
		font-size: 40rpx;
		width: 30%;
		text-align: right;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.userinfo-item input {
		height: 80rpx;
		width: 70%;
		margin-right: 40rpx;
		margin-bottom: 20rpx;
		border-bottom: 1px solid a2a2a2;
	}
	.roomnum-picker-waper{
		display: flex;
		width: 70%;
		flex-direction: row;
		margin-bottom: 20rpx;
	}
	.roomnum-picker-waper picker{
		width: 50%;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid a2a2a2;
		margin-right: 40rpx;
	}
	.roomnum-picker-waper picker view{
		min-width: 100rpx;
		min-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}
	button{
		margin-top: 50rpx;
		width: 80%;
	}
</style>
